<template>
  <div class="tree-search">
    <slot name="title"></slot>
    <el-dialog
      :title="title"
      :visible="thisDialogVisible"
      width="50%"
      custom-class="public-model-add-dialog"
      @close="close"
      append-to-body
    >
      <div class="select-range-content">
        <div class="left-content">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="请输入内容"
            v-model="searchContent"
          ></el-input>
          <el-tree
            :props="treeProps"
            :load="loadNode"
            lazy
            @check="treeCheck"
            @node-click="onNodeClick"
            node-key="dept_id"
            :default-checked-keys="dcnodes"
            class="scroll-content"
            show-checkbox
            ref="tree"
            v-if="mode !== 'employee'"
          >
          </el-tree>
          <el-tree
            :props="{
              label: (data) => {
                return `${data.employee_name}(${data.employee_id})`;
              },
              isLeaf: true,
            }"
            node-key="employee_id"
            :data="leftPersons"
            show-checkbox
            @check="treeCheck"
            :default-checked-keys="dcnodes"
            class="scroll-content"
            v-else
          >
          </el-tree>
        </div>
        <div class="center-content" v-if="mode === 'all'">
          <span>人员选择</span>
          <el-tree
            :props="{
              label: (data) => {
                return `${data.employee_name}(${data.employee_id})`;
              },
              isLeaf: true,
            }"
            node-key="employee_id"
            :data="centerPersons"
            show-checkbox
            @check="centerTreeCheck"
            :default-checked-keys="cdcnodes"
            class="scroll-content"
            ref="centerTree"
          >
          </el-tree>
        </div>
        <div class="right-content">
          <span
            >已选择{{
              mode === "employee"
                ? "人员"
                : mode === "dept"
                ? "部门"
                : "部门、人员"
            }}</span
          >
          <div class="selected-content scroll-content">
            <div
              class="selected-item"
              v-for="item in selectedNodes"
              :key="item.dept_id"
            >
              <div class="item-left">
                <i
                  :class="
                    mode === 'employee' ? 'el-icon-user' : 'el-icon-folder'
                  "
                ></i>
                {{ item[treeProps.label] }}
              </div>
              <span
                v-if="
                  thisMainDept !== undefined && thisMainDept === item.dept_id
                "
                >{{ "主" }}</span
              >
              <span
                v-else-if="thisMainDept !== undefined"
                class="set-to-main"
                @click="setToMain(item.dept_id)"
                >设为主部门</span
              >
            </div>
            <div
              class="selected-item"
              v-for="item in centerChecked"
              :key="item.employee_id"
            >
              <div class="item-left">
                <i class="el-icon-user"></i>
                {{ item.employee_name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonInDept, getRootNode, getTargetNodes } from "@/http/api";
export default {
  name: "treeSearch",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
      required: true,
    },
    title: {
      type: String,
      default: "配置发布范围",
    },
    dept: {
      type: Object,
      default: () => undefined,
    },
    main_dept: {
      type: Number | undefined,
      default: undefined,
    },
    selected_dept: {
      type: Array,
      default: () => [],
    },
    selected_employee: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: "dept",
    },
    ifSingle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      treeProps: {
        label: this.mode !== "employee" ? "dept_name" : "employee_name",
        isLeaf: "leaf",
      },
      selectedNodes: [],
      searchContent: "",
      thisMainDept: undefined,
      dcnodes: [],
      cdcnodes: [],
      centerPersons: [],
      centerChecked: [],
      leftPersons: [],
    };
  },
  async mounted() {
    if (this.main_dept) {
      this.thisMainDept = this.main_dept;
    }
    this.selectedNodes = this.selected_dept;
    if (this.mode === "all") {
      this.centerChecked = this.selected_employee;
      this.cdcnodes = this.selected_employee.map((item) => item.employee_id);
    }
    this.dcnodes =
      this.mode !== "employee"
        ? this.selected_dept
          ? this.selected_dept.map((item) => {
              return item.dept_id;
            })
          : []
        : this.selected_employee
        ? this.selected_employee.map((item) => {
            return item.employee_id;
          })
        : [];
  },
  watch: {
    dept: async function (newVal) {
      if (newVal !== null) {
        let res = await getPersonInDept({
          worker_id: this.dept.worker_id,
          status: 1,
        });
        if (res.code === 20041) {
          this.leftPersons = res.data;
        }
      }
    },
    selected_dept: function (newVal) {
      if (newVal !== null) {
        this.selectedNodes = newVal;
        this.dcnodes = newVal.map((item) => {
          return item.dept_id;
        });
      }
    },
    selected_employee: function (newVal) {
      if (newVal !== null) {
        this.selectedNodes = newVal;
        this.dcnodes = newVal.map((item) => {
          return item.employee_id;
        });
      }
    },
    main_dept: function (newVal) {
      this.thisMainDept = newVal;
    },
    centerChecked: function (newVal) {
      this.cdcnodes = newVal.map((item) => {
        return item.employee_id;
      });
    },
  },
  computed: {
    thisDialogVisible() {
      return this.dialogVisible;
    },
  },
  methods: {
    handleCancel() {
      this.$emit("changeDialogVisible", false);
    },
    close() {
      this.$emit("changeDialogVisible", false);
    },
    handleSubmit() {
      this.$emit(
        "dialogSubmit",
        this.mode !== "all"
          ? this.selectedNodes
          : {
              dept: this.selectedNodes,
              employee: this.centerChecked,
            },
        this.thisMainDept
      );
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        let res = await getRootNode();
        let root = {};
        if (res.code === 20041) {
          root = res.data;
        }
        return resolve([root]);
      }
      let res = await getTargetNodes(node.data.dept_id);
      if (res.code === 20041) {
        return resolve(res.data);
      }
    },
    treeCheck(currentNode, { checkedNodes }) {
      if (this.ifSingle) {
        let newPerson = [currentNode];
        this.$refs.tree.setCheckedNodes(newPerson);
        this.selectedNodes = newPerson;
      } else {
        this.selectedNodes = checkedNodes;
      }
    },
    setToMain(dept_id) {
      this.thisMainDept = dept_id;
    },
    async onNodeClick(current) {
      if (this.mode === "all") {
        let res = await getPersonInDept({
          worker_id: current.worker_id,
          status: 1,
        });
        if (res.code === 20041) {
          this.centerPersons = res.data;
        }
      }
    },
    centerTreeCheck(_, { checkedNodes }) {
      this.centerChecked = checkedNodes;
    },
  },
};
</script>

<style lang="less">
.public-model-add-dialog .select-range-content {
  display: flex;
  border: 1px solid #e9eaed;
  & > div {
    flex: 1;
  }
  .left-content {
    padding: 20px 16px;
    border-right: 1px solid #e9eaed;
    display: flex;
    flex-direction: column;
    .el-input {
      margin-bottom: 10px;
    }
    .el-tree {
      height: calc(100vh - 430px);
    }
  }
  .center-content {
    border-right: 1px solid #e9eaed;
    padding: 20px;
  }
  .right-content {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    .selected-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 386px);
      margin-top: 6px;

      .selected-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px;
        i {
          margin-right: 6px;
        }
        .set-to-main {
          color: #306eff;
          font-size: 12px;
          display: none;
          cursor: pointer;
        }
        &:hover {
          .set-to-main {
            display: block;
          }
          background-color: #f5f9ff;
        }
      }
    }
  }
}
</style>
